<template>
	<view class="index">
		<view class="title">登录</view>
		<view class="sjh">
			<view>手机号</view>
			<view>
				<input v-model="phone" @blur="phoneClick" type="text" placeholder="请输入手机号" placeholder-style="color:#999999;" />
				<text v-if="phoneActive">手机号格式错误！</text>
			</view>
		</view>
		<view class="sjh">
			<view>密码</view>
			<input type="password" v-model="mm" placeholder="请输入密码" placeholder-style="color:#999999;"/>
		</view>
		
		<view class="bottom">
			<view class="left" @click="wjmmClick">忘记密码</view>
			<view class="right">还没有账号？<span @click="zcClick">立即注册</span></view>
		</view>
		
		<view class="btn" @click="btnClick">
			登录
		</view>
	</view>
</template>

<script>
	import { RegularVerification } from '@/common/regular.js'
	export default {
		data() {
			return {
				phone: '', // 手机号
				mm:'', // 密码
				phoneActive:false,
			}
		},
		methods: {
			// 登入
			btnClick(){
				if(!this.phoneActive){
					if(!this.phone){
						uni.showModal({
							showCancel: false,
							title: '温馨提示',
							content:'手机号不能为空！'
						})
					}else if(!this.mm){
						uni.showModal({
							showCancel: false,
							title: '温馨提示',
							content:'密码不能为空！'
						})
					}else{
						console.log('登录成功');
					}
				}
			},
			// 手机号
			phoneClick(){
				if(this.phone != 0){
					if(!RegularVerification(this.phone,2)){
						this.phoneActive = true
					}else{
						this.phoneActive = false
					}
				}else{
					this.phoneActive = false
				}
			},
			zcClick(){
				uni.navigateTo({
					url:'./login-zc'
				})
			},
			wjmmClick(){
				uni.navigateTo({
					url:"./login-wjmm"
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index{
		padding: 0 30rpx;
	}
	
	.title{
		padding-top: 156rpx;
		margin-bottom: 70rpx;
		font-family: PingFangSC-Bold;
		font-size: 40rpx;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}
	
	.sjh {
		margin-top: 35rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		view:nth-child(1) {
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #333333;
		}
	
		view:nth-child(2) {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			image {
				width: 42rpx;
				height: 24rpx;
			}
	
			.yzm {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #4d77ff;
			}
		}
		text{
			font-family: PingFangSC-Regular;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: red;
		}
		input {
			margin-top: 20rpx;
		}
	}
	
	.bottom{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #4d77ff;
		}
		.right{
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #333333;
			span{
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0rpx;
				color: #4d77ff;
			}
		}
	}
	
	.btn{
		margin: 0 36rpx;
		margin-top: 80rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background-color: #5b96ff;
		border-radius: 6rpx;
		font-family: PingFangSC-Medium;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	
</style>
